<!DOCTYPE html>
  <html lang="en">
  <head>
      <meta charset="utf-8">
      <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
      <title>title</title>
      <link rel="stylesheet" type="text/css" href="../css/api.css"/>
      <link href="../css/mui.min.css" rel="stylesheet">
      <link rel="stylesheet" type="text/css" href="../css/map.css"/>
      <link rel="stylesheet" type="text/css" href="../css/mui.picker.min.css"/>

      <link rel="stylesheet" type="text/css" href="../css/mescroll.min.css"/>

      <style>
          html,body{
              height: 100%;
              /*overflow: auto;*/
          }
          .mui-content {
            background-color: #fff;
          }
          /*#tabview {
            margin-top: 12rem;
          }*/
          .mui-table-view {
            margin: 10px 0px;
            /*border: 1px solid #ccc;*/
            /*border-bottom: 0;*/
            padding: 0px 4px;
          }
          /*.mui-table-view:last-child {
            margin-bottom: 0;
            background-color: red;
          }*/
          .tableListone {
            display: inline-block;
            /*padding: 4px 0px;*/
          }
          .tableListtwo {
            display: inline-block;
            padding-left: 15px;
          }
          .tableLine {
            padding: 4px 0px;
          }
          .normal {
            color: green;
          }
          .abnormal {
            color: red;
          }
          .lookup {
            position: fixed;
            z-index: 2;
            left: 0;
            top: 0;
            /*padding: 10px;*/
            background: #eee;
            /*margin*/
          }
          .mui-dtpicker-header:after {
            clear: both;
            content: '';
            display: block;
            height: 0;
            width: 0;
          }
          .mui-col-xs-7 {
            width: 50%;
          }
          .mui-dtpicker-title h5 {
            font-weight: 400;
            color: #8f8f94;
            font-size: 14px;
          }
          .mui-dtpicker .mui-picker {
            float: left;
          }
          /*.mui-btn {
            width: 100%;
          }*/
          .mui-btn {
            float: left;
          }
          /*.mui-scroll {
            height: auto;
            position: fixed;
            top: 10px;
          }*/
          .mescroll{     position: fixed;
    top: 180px;
    bottom: 0;
    height: auto; }

      </style>
  </head>
  <body>
    <div id="main">
      <div id="refreshContainer" >
        <div class="lookup">
            <div class="mui-col-xs-7">
              <label style="font-size: 14px;" class="text">BeginDate</label>
              <input id="BeginDate" readonly value="" data-options='{"type":"date"}' style="float: left; width: 100%;" readonly class="mui-input-clear">
           </div>
          <div class="mui-col-xs-7">
            <label style="font-size: 14px;" class="text">EndDate</label>
            <input id="EndDate"  readonly value="" data-options='{"type":"date"}' style="float: left; width: 100%;" readonly  class="mui-input-clear">
          </div>
          <div class="mui-col-xs-7" id="muiRow2">

          </div>
          <div class="mui-col-xs-7" id="muiContent">

          </div>
          <div class="mui-col-xs-7" id="muiCommon">

          </div>
          <div class="mui-col-xs-7">
            <button type="button" class="mui-btn" style="height: 34px; padding: 0px; width: 100%;"  id="Search">Search</button>
          </div>
        </div>
        <div class="mescroll" id="mescroll">
          <!--数据列表-->
          <ul  id="tabview">
          </ul>
        </div>
      </div>
    </ul>
    </div>
  </body>
  <script id="template4" type="text/x-dot-template">
      <select onchange="select2('select2')" id="select2" style="width: 100%; height: 34px;">
        <option value="">PlateNumber</option>
          {{ for (var prop in it) { }}
        <option value={{=it[prop].id}}>{{=it[prop].PlateNumber}}</option>
          {{ } }}
      </select>
  </script>
  <script id="template3" type="text/x-dot-template">
      <select onchange="select2('select3')" id="select3" style="width: 100%; height: 34px;">
        <option value="">Organization</option>
          {{ for (var prop in it) { }}
        <option value={{=it[prop].id}}>{{=it[prop].Name}}</option>
          {{ } }}
      </select>
  </script>

  <script id="template2" type="text/x-dot-template">
      <select onchange="select2('select4')" id="select4" style="width: 100%; height: 34px;">
        <option value="">Cartype</option>
          {{ for (var prop in it) { }}
        <option value={{=it[prop].id}}>{{=it[prop].name}}</option>
          {{ } }}
      </select>
  </script>
  <script id="template" type="text/x-dot-template">
  {{ for (var key in it) { }}
  <div class="mui-table-view">
    <div class="tableLine">
    {{? it[key].PlateNumber }}
      <span class="tableListone" style="font-weight: bold;">{{=it[key].PlateNumber}}</span>
      {{??}}
      <span class="tableListone" style="font-weight: bold;">{{=it[key].carnum}}</span>
      {{?}}
    </div>
      {{? it[key].Driver}}
       <div class="tableLine">
        {{? it[key].Driver === '' || it[key].Driver == null}}
         <span class="tableListone">The Driver：</span> <span class="abnormal">No Data</span>
          {{??}}
        <span class="tableListone">The Driver：</span> <span>{{=it[key].Driver}}</span>
        {{?}}
       </div>
     {{??}}
     {{?}}
     <div class="tableLine">
     {{? it[key].VehicleType}}
       <span class="tableListone">Vehicle Type：</span> <span>{{=it[key].VehicleType}}</span>
       {{??}}
       <span class="tableListone">Vehicle Type：</span> <span>{{=it[key].typename}}</span>
       {{?}}
     </div>
     <div class="tableLine">
     {{? it[key].Organization}}
       <span class="tableListone">Organization：</span> <span>{{=it[key].Organization}}</span>
       {{??}}
       <span class="tableListone">Organization：</span> <span>{{=it[key]['KD_NAME']}}</span>
       {{?}}
     </div>
     {{? it[key].ViolationPeriod}}
      <div class="tableLine">
      {{? it[key].ViolationPeriod === '' || it[key].ViolationPeriod == null}}
        <span class="tableListone">Drive mileage：</span> <span class="abnormal">No Data</span>
        {{??}}
        <span class="tableListone">Drive mileage：</span> <span class="abnormal">{{=it[key].ViolationPeriod}}</span>
        {{?}}
      </div>
      {{??}}
      {{?}}
      <div class="tableLine">
      {{? it[key].OverspeedTimes === '' || it[key].OverspeedTimes == null}}
        <span class="tableListone">Over rspeed Times：</span> <span class="abnormal">No Data</span>
        {{??}}
        <span class="tableListone">Over speed Times：</span> <span class="abnormal">{{=it[key].OverspeedTimes}}</span>
        {{?}}
      </div>
      {{? it[key].TypeOfViolation}}
      <div class="tableLine">
      {{? it[key].TypeOfViolation === '' || it[key].TypeOfViolation == null}}
        <span class="tableListone">Type Of Violation：</span> <span class="abnormal">No Data</span>
        {{??}}
        <span class="tableListone">Type Of Violation：</span> <span class="abnormal">{{=it[key].TypeOfViolation}}</span>
        {{?}}
      </div>
      {{??}}
      {{?}}
      <div class="tableLine">
      {{? it[key].abnormalnumberofoil === '' || it[key].abnormalnumberofoil == null}}
        <span class="tableListone">Abnormal number of oil：</span> <span class="abnormal">No Data</span>
        {{??}}
        <span class="tableListone">Abnormal number of oil：</span> <span class="abnormal">{{=it[key].abnormalnumberofoil}}</span>
        {{?}}
      </div>
      {{? it[key].ViolationLength}}
        <div class="tableLine">
          {{? it[key].ViolationLength === '' || it[key].ViolationLength == null }}
          <span class="tableListone">Violation Length：</span> <span class="abnormal">No Data</span>
          {{??}}
          <span class="tableListone">Violation Length：</span> <span class="abnormal">{{=it[key].ViolationLength}}</span>
          {{?}}
        </div>
        {{??}}
        {{?}}
        <div class="tableLine">
          {{? it[key].OvertimepackingTimes === '' || it[key].OvertimepackingTimes == null }}
          <span class="tableListone">Over time packing Times：</span> <span class="abnormal">No Data</span>
          {{??}}
          <span class="tableListone">Over time packing Times：</span> <span class="abnormal">{{=it[key].OvertimepackingTimes}}</span>
          {{?}}
        </div>
        {{? it[key].ViolationStatus}}
          <div class="tableLine">
          {{? it[key].ViolationStatus === '' || it[key].ViolationStatus == null }}
            <span class="tableListone">Violation Status：</span> <span class="abnormal">No Data</span>
            {{??}}
            <span class="tableListone">Violation Status：</span> <span class="abnormal">{{=it[key].ViolationStatus}}</span>
            {{?}}
          </div>
          {{??}}
          {{?}}
      {{? it[key].ViolationSite}}
        <div class="tableLine">
        {{? it[key].ViolationSite === '' || it[key].ViolationSite == null }}
          <span class="tableListone">Refueling capacity：</span> <span class="abnormal">No Data</span>
          {{??}}
          <span class="tableListone">Refueling capacity：</span> <span>{{=it[key].ViolationSite}}</span>
          {{?}}
        </div>
        {{??}}
        {{?}}
  </div>
  {{ } }}
  </script>
  <script type="text/javascript" src="../script/api.js"></script>
  <script type="text/javascript" src="../script/doT.min.js"></script>
  <script type="text/javascript" src="../script/ajax.js"></script>
  <script type="text/javascript" src="../script/mescroll.min.js"></script>
  <script type="text/javascript" src="../script/mui.min.js"></script>
  <script type="text/javascript" src="../script/mui.picker.min.js"></script>
  <script type="text/javascript" src="../script/time.js"></script>
  <script type="text/javascript" src="../script/bbb.js"></script>

  <script type="text/javascript" src="../script/common.js"></script>

  <script type="text/javascript">
      apiready = function(){
        var tabview = $api.byId('tabview');
        var BeginDate = $api.byId('BeginDate');
        var EndDate = $api.byId('EndDate');
        BeginDate.value = getNowFormatDate();
        EndDate.value = getNowFormatDate();
        var Search = $api.byId('Search');
        var template = $api.byId('template');
        var template2 = $api.byId('template2');
        var interText = doT.template(template.innerHTML);
        var interText2 = doT.template(template2.innerHTML);
        var interText3 = doT.template(template3.innerHTML);
        var interText4 = doT.template(template4.innerHTML);
        var istrue = true;
        var query = $api.getStorage('query');
        var nowDate = '';
        getTypeId(interText2);
        getId(interText3);
        getPlateNumber(query.id, interText4);
        // BeginDate.addEventListener('click', function() {
        //   api.openPicker({
        //       type: 'date',
        //       // date: '2014-05-',
        //       title: 'Selection time'
        //   }, function(ret, err) {
        //       if (ret) {
        //       BeginDate.value = getDate(ret);
        //           // alert(JSON.stringify(ret));
        //       } else {
        //           alert(JSON.stringify(err));
        //       }
        //   });
        // });
        // EndDate.addEventListener('click', function() {
        //   api.openPicker({
        //       type: 'date',
        //       // date: '2014-05-',
        //       title: 'Selection time'
        //   }, function(ret, err) {
        //       if (ret) {
        //         EndDate.value = getDate(ret);
        //       }
        //   });
        // });
        var PlateNumber, Org, Type, beginTime, endingTime;
        Search.addEventListener('click', function() {
          PlateNumber = select2('select2');
          Org = select1('select3');
          Type = select1('select4');
          // console.log(getNowFormatDate());
          // if (EndDate.value === '' || BeginDate.value === '') {
          //   api.toast({
          //      msg: 'The start time or the end time can not be empty',
          //      duration: 3000,
          //      location: 'middle'
          //    });
          //    return false;
          // }
          var startTime = new Date(BeginDate.value);
          var endTime = new Date(EndDate.value);
          var nDate = new Date(getNowFormatDate());
          let stamp = 1000 * 60 * 60 * 24;
          if (BeginDate.value === EndDate.value) {
            nowDate = BeginDate.value;
            istrue = true;
            tabview.innerHTML = '';
            mescroll.resetUpScroll();
          } else  {
          if (startTime > endTime || endTime - nDate >= 0) {
              api.toast({
                 msg: 'The end date cannot be greater than or equal to today',
                 duration: 3000,
                 location: 'middle'
               });
               return false;
            } else {
              beginTime = BeginDate.value;
              endingTime = EndDate.value;
              istrue = false;
              tabview.innerHTML = '';
              mescroll.resetUpScroll();
            }
          }
        });
        //  单日查询
        function getNowDate(page) {
          if (istrue) {
            getListDataFromNet(nowDate, Org, PlateNumber, Type, page.num, page.size, function (curPageData) {
              mescroll.endByPage(page.size, curPageData.length);
            });
          } else {
            getInterDay(beginTime, endingTime,  Org, PlateNumber, Type, page.num, page.size, function (curPageData) {
              mescroll.endByPage(page.size, curPageData.length);
            });
          }
        }
        //  跨天查询
        function getInterDay(beginTime, endingTime, Org, PlateNumber, Type, page, pageSize, successCallback) {
          if (Org === '') {
            Org = query.Org;
          }
          if(PlateNumber === 'PlateNumber') {
            PlateNumber = '';
          } else {
            PlateNumber = PlateNumber;
          }
          api.ajax({
            url: 'http://223.255.10.50:8029/dsp-ShateApp-ui/carinfo/app/findViolationMonth.action',
            method: 'get',
            data: {
              values: {
                page: page,
                Organization: Org,
                vehicleType: PlateNumber,
                startDate: beginTime,
                endDate: endingTime,
                row: pageSize
              }
            }
            }, function(ret, err) {
              if (ret) {
                if (ret.data.page === ret.data.totalpage) {
                  tabview.innerHTML = interText(ret.data.rows);
                  mescroll.endByPage(pageSize, ret.data.totalpage);
                  // successCallback(ret.data.rows)
                } else {
                  mescroll.endByPage(pageSize, ret.data.totalpage);
                  tabview.innerHTML += interText(ret.data.rows);
                  successCallback(ret.data.rows)
                }
              } else {
                alert('Server exception');
              }
          });
        }
        //  单日
        function getListDataFromNet(nowDate, Org, PlateNumber, Type, page, pageSize, successCallback) {
          if (nowDate === '') {
            nowDate = getNowFormatDate();
          } else {
            nowDate = nowDate;
          }
          if (typeof Org === 'undefined') {
            Org = query.Org;
          } else {
            Org = Org;
          }
          if (PlateNumber === 'PlateNumber') {
            PlateNumber = '';
          } else {
            PlateNumber = PlateNumber;
          }
          if (typeof Type === 'undefined') {
            Type = '';
          } else {
            Type = Type;
          }
          api.ajax({
            url: 'http://223.255.10.50:8029/dsp-ShateApp-ui/carinfo/app/findViolation.action',
            method: 'get',
            data: {
              values: {
                page: page,
                organization: Org,
                plateNumber: PlateNumber,
                vehicleType: Type,
                date: nowDate,
                row: pageSize
              }
            }
            }, function(ret, err) {
              if (ret) {
                // if (ret.data.rows.length === 0) {
                //   mescroll.endByPage(pageSize, ret.data.totalpage);
                //   successCallback(ret.data.rows)
                //   tabview.innerHTML = '';
                //   return  false;
                // }
                if (ret.data.page < ret.data.totalpage) {
                  // tabview.innerHTML = interText(ret.data.rows);
                  // mescroll.endByPage(pageSize, ret.data.totalpage);
                  tabview.innerHTML += interText(ret.data.rows);
                  successCallback(ret.data.rows);
                } else {
                // console.log(JSON.stringify(ret))
                // console.log('111')
                  tabview.innerHTML += interText(ret.data.rows);
                  mescroll.endByPage(pageSize, ret.data.totalpage);
                  // successCallback(ret.data.rows)
                }
              } else {
                mescroll.endErr();
                alert('Server exception');
              }
          });
        };
        //  初始化
          var mescroll = new MeScroll("mescroll", {
            //第一个参数"mescroll"对应上面布局结构div的id
         		//如果您的下拉刷新是重置列表数据,那么down完全可以不用配置,具体用法参考第一个基础案例
         		//解析: down.callback默认调用mescroll.resetUpScroll(),而resetUpScroll会将page.num=1,再触发up.callback
    				down: {
              use: false
    				},
    				up: {
              auto: true,
    					callback: getNowDate, //上拉加载的回调
              noMoreSize: 5,
              htmlLoading: '<p class="upwarp-progress mescroll-rotate"></p><p class="upwarp-tip">Loading..</p>',
    					isBounce: false //如果您的项目是在iOS的微信,QQ,Safari等浏览器访问的,建议配置此项.解析(必读)
    				}
  			});
      };
  </script>
  </html>
